{extend name='index@template/base'}{/extend}
{block name='style'}
<style>
.nav-tabs-custom .nav-tabs{
    min-height: 100%;
    float: left;
    width: 15%;
}
.nav-tabs-custom .nav-tabs li{
    float: none;
    width: 100%;
}
.nav-tabs-custom .tab-content{
    width: 85%;
    float: left;
}
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #fff;
    border-right-color: #00a0e9;
}
.nav-tabs-custom > .nav-tabs > li.active a {
    border-right-color: transcategory;
    color: #00a0e9 ;
}
 .btn-botom{
     width: 100%;
     height: 50px;
     margin-right: 20px;
     text-align: right;
     position: fixed;
     bottom:0;
     right:0;

 }
</style>
<link rel="stylesheet" href="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.css">
<link href="__STATIC__/plugins/webuploader/webuploader_pc.css" rel="stylesheet" type="text/css"/>
<link href="__STATIC__/plugins/webuploader/custom/style.css" rel="stylesheet" type="text/css"/>

{/block}
{block name='script'}
<script src="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
{/block}
{block name='content'}
<div class="wrapper">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">基本信息</a></li>
            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">详情</a></li>
            <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false" onclick="webuploader()">图片</a></li>
        </ul>
        <form id="form" class="form-horizontal" action="{:url('ShopGoods/insert')}">
        <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
                <div class="box-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><i data-icomoon="&#xe05c"></i>商品分类</label>
                        <div class="col-sm-6" style="position: relative">
                            <!--<div class="input-group"  onclick="show_tree()">-->
                                <div class="input-group" id="cate_input_group" onclick="show_tree()">
                                <input  id="appendedInput" style="cursor: pointer" readonly="true" value="{$item.name ?? '请选择商品分类'}" class="form-control tree-input span2" type="text" name="category"  datatype="*" nullmsg="请填写商品分类">
                                <span class="input-group-addon" style="background: #eeeeee;border-radius: 0 4px 4px 0;cursor: pointer"><i class="fa fa-chevron-down"></i></span>
                            </div>
                            <input type="hidden" id="category_id" name="category_id" value="{$item.id ?? '0'}">
                            <div class="treeview" style="display: none;position: absolute;z-index: 999;"></div>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="name"  datatype="*" nullmsg="请填写店铺名称">
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品简介</label>
                            <div class="col-sm-6">
                                <textarea name="intro" class="form-control" rows="3" maxlength="255"></textarea>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon">￥</span>
                                    <input name="price" type="number" class="form-control" style="width: 100px;">
                                </div>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">库存</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="number" name="stock"  style="width: 139px;">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="number" name="sort" style="width: 139px;" value="0">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否礼品</label>
                        <div class="col-sm-6"  style="margin-top: 7px">
                            <span class="mr20" style="padding-right: 20px"><input type="radio" class="minimal" name="flag_gift" value="0" > 否</span>
                            <span class="mr20"><input type="radio" class="minimal" name="flag_gift" value="1" checked> 是</span>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否上架</label>
                            <div class="col-sm-6" style="margin-top: 7px">
                                <span class="mr20" style="padding-right: 20px"><input type="radio" class="minimal" name="flag_use" value="1"> 下架</span>
                                <span class="mr20" ><input type="radio" class="minimal" name="flag_use" value="0" checked> 上架</span>

                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </div>

            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_2">
                <div class="box-body">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <!-- 加载编辑器的容器 -->
                            <script id="container1" name="detail" type="text/plain" style="height: 350px;border:none; width: 100%;"></script>
                            <!-- 配置文件 -->
                            <script type="text/javascript" src="__STATIC__/plugins/ueditor/ueditor.config.js"></script>
                            <!-- 编辑器源码文件 -->
                            <script src="__STATIC__/plugins/ueditor/ueditor.all.min.js" type="text/javascript"></script>
                            <!-- 实例化编辑器 -->
                            <script type="text/javascript">
                                var ue = UE.getEditor('container1');
                            </script>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="tab_3">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面图片</label>
                            <div class="col-sm-10">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div id="picker2"></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="hidden" name="cover_image" id="cover_image"/>
                                        <img src="" id="img1" style="display: none; max-width: 120px; max-height: 120px;"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面图片</label>
                            <div class="col-sm-10">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div id="picker1"></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="hidden" name="slide_image" id="slide_image"/>
                                        <img src="" id="img2" style="display: none; max-width: 120px; max-height: 120px;"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>

        </div>
        </form>
        <!-- /.tab-content -->
    </div>

</div>
<div class="btn-botom">
    <button type="submit" class="btn btn-primary btn-submit">&nbsp;&nbsp;保存商品&nbsp;&nbsp;</button>
</div>
{/block}
{block name='script_extra'}
<script src="__STATIC__/plugins/webuploader/webuploader.min.js" type="text/javascript"></script>
<script>
    var tree_data_url="{:url('ShopGoodsCategory/cate_tree_data')}"
</script>
<script>
    $('.btn-submit').on('click',function () {
       $('#form').submit();
    })
    $("#form").Validform({
        tiptype:2,
        showAllError:true,
        ajaxPost: true,
        callback: function (res) {
            if (res.success == true){
                layer.msg(res.message, {time: 1000},function () {
                    layer_close();
                    category.location.reload();
                });
            }else{
                layer.alert(res.message);
            }
        }
    });
</script>
<script>
    function show_tree() {
        var treeview=$('.treeview');
        get_tree();
        if(treeview.is(":hidden")){
            treeview.show();
        }else{
            treeview.hide();
        }
    }
    document.onclick=function (e) {
        var treeview=$('.treeview');
        if(e.target.offsetParent!=$('#cate_input_group')[0]&&e.target.tagName!='SPAN'){
            treeview.hide();
        }
    }
//    $('body').on('click',function (e) {
//        var treeview=$('.treeview');
//        var cate=$('#cate_input_group')[0];
//        get_tree();
//        console.log(e.target);
//        if(e.target.offsetParent==cate){
//            if(treeview.is(":hidden")){
//                treeview.show();
//            }else{
//                treeview.hide();
//            }
//        }else if(e.target==document.querySelector('.treeview .glyphicon-plus')){
//            console.log(111);
//        }
//        else{
//                        treeview.hide();
//        }
//    });
    function get_tree() {
        var treeview=$('.treeview');
        $.post(tree_data_url, function (json) {
//            console.log(json);
            treeview.treeview({
                showCheckbox:true,
                color:'#428bca',
                onNodeSelected: function(event, node) {
                    $('.tree-input').val(node.text);
                    $('#category_id').val(node.id);
                    treeview.hide();
                },
                levels:1,
                data: json});
        });
    }

</script>

<script type="text/javascript">
    var goodsImg = '',goodsShowImgs = [];
</script>
<script>
    function webuploader() {
        var uploader = WebUploader.create({
            auto: true,
            pick:{
                id:'#picker1',
                label:'上传文件'
            },
            paste: document.body,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            swf: '__STATIC__/plugins/webuploader/Uploader.swf',
            server: "{:url('ShopGoods/uploadImg')}",
            disableGlobalDnd: true,
            chunked: false,
            fileNumLimit: 10,
            fileSizeLimit: 5 * 1024 * 1024,
            fileSingleSizeLimit: 1024 * 1024
        });
        uploader.addButton({
            id: '#picker2',
            innerHTML: '选择文件'
        });

        uploader.on('uploadStart', function () {

            //Euix.mask();
        });

        uploader.on('uploadComplete', function () {
            uploader.reset();
            //Euix.unmask();
        });

        uploader.on('uploadSuccess', function (file, res) {

            if(uploader.options.pick){
                console.log(uploader);
            }

            if (res.success) {
                $('#img1').attr('src', res.data.base_url+res.data.url).show();
                goodsImg = res.data.file_id;
                $('#cover_image').val(goodsImg);
            } else {

            }
        });
    }


</script>
{/block}